
// import { REGION_DATA } from '@/common/area-code';
// import { generateRegionData } from '@/common/util';
// import useRegionAction from '@/hooks/useRegionAction';
import { DataItem } from '@/typing';
import { Cascader } from '@antmjs/vantui'
// import { regionData, codeToText } from 'element-china-area-data'
// console.log(regionData)
import { forwardRef } from 'react'

interface ICascaderActionSheet{
    codeToText:{[key: string]: string};
    regionData:DataItem[];
    areaVisible:boolean;
    handleCloseAreaAction:() => void;
    handleAreaChangeAction:(areaDetail,areaCodeObj) => void;
}
const CascaderActionSheet:React.FC<ICascaderActionSheet>=forwardRef((props,ref)=>{

    const {areaVisible,handleCloseAreaAction,handleAreaChangeAction,regionData,codeToText} = props
    
    const handleAreaChange=(e)=>{
      

        const areaDetail = e[2] ? `${codeToText[e[0]]}/${codeToText[e[1]]}/${codeToText[e[2]]}` :`${codeToText[e[0]]}/${codeToText[e[1]]}`
        const areaCodeObj = {
            province_code:e[0],
            city_code:e[1],
            district_code:e[2]
        }

       
        handleAreaChangeAction(areaDetail,areaCodeObj)

    }
    const handleCloseArea=()=>{
        handleCloseAreaAction()
    }
   
    return(
        <>
        <Cascader
        // scrollIntoView={false}
        childrenKey="children"
        visible={areaVisible}
       
        textKey="label"
        title="地区选择"
        options={regionData}
        closeable
        onClose={() => {
          handleCloseArea()
        }}
        onChange={handleAreaChange}
      />
        </>
    )
})
export default CascaderActionSheet;